<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<img class="activator" id="activator" src="https://s2.svgbox.net/hero-outline.svg?ic=menu-alt-1&color=khaki" width="32" height="32">
<nav>
<ul>
<li><a href=""><img src="https://s2.svgbox.net/hero-outline.svg?ic=bell&color=red" width="32" height="32"></a></li>
<li><a href=""><img src="https://s2.svgbox.net/hero-outline.svg?ic=beaker&color=lightblue" width="32" height="32"></a></li>
<li><a href=""><img src="https://s2.svgbox.net/hero-outline.svg?ic=chart-bar&color=purple" width="32" height="32"></a></li>
<li><a href=""><img src="https://s2.svgbox.net/hero-outline.svg?ic=cloud-download&color=orange" width="32" height="32"></a></li>
</ul>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js" integrity="sha512-cdV6j5t5o24hkSciVrb8Ki6FveC2SgwGfLE31+ZQRHAeSRxYhAQskLkq3dLm8ZcWe1N3vBOEYmmbhzf7NTtFFQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/CSSRulePlugin.min.js" integrity="sha512-0bzaetZStCnsUgbCtGVxftzF/L32PNOnrMlYLXwBOKl8cUjTSSDfJVyyJsNwGoI0iE0WUqni2eEfO35kJjFj5g==" crossorigin="anonymous"></script>
<script>
let card = document.getElementById('activator');
let tl = gsap.timeline({default: {ease: 'power2.inOut'}});
let toggle = false;
tl.to('.activator', {
background: '#805ad5',
'borderRadius': '5em 0 0 5em'
});
tl.to('nav', {
'clipPath' : 'ellipse(100% 100% at 50% 50%)'
},'-=.5s')
tl.to('nav img', {
opacity:1,
transform: 'translateX(0)',
stagger: .05
